<template>
	<view class="_teacher_appoint" v-if="teacher">
		<view class="_right">
			<image class="t_avatar" mode="aspectFit" :src="teacher.callingBg || teacher.avatar">
			</image>
			<view class="text-center f-s-12 three-color">{{
				teacher.type == 'L' ? '培训咨询专家' : teacher.type == 'T' ? '培训专家':'咨询专家'				
			}}</view>
		</view>
		<view class="f-w-b f-s-18">{{ teacher.name }}</view>
		<view class="f-s-12 u-m-t-12 two-color">{{ teacher.label }}</view>
		<view class="u-m-t-12 f-s-12 three-color">
			<text>{{ teacher.ageGroup }}</text>
			<text class="u-m-l-12">|</text>
			<text class="u-m-l-12">{{ teacher.city }}</text>
			<!-- <text class="u-m-l-12">|</text>
			<text class="u-m-l-12">{{ teacher.name }}</text> -->
		</view>
		<!-- <view class="u-flex u-flex-items-center u-m-t-20"> -->
			<!-- <block v-for="field in teacher.domainList" :key="field.id">
				<tag :text="field.name" color="#F53F3F" background="#FFECE8" />
			</block> -->
		<!-- </view> -->
	</view>
</template>

<script setup>
	import tag from '@/components/common/tag.vue'
	import {
		defineProps
	} from 'vue';
	const props = defineProps({
		teacher: Object
	})
</script>

<style lang="scss" scoped>
	._teacher_appoint {
		position: relative;
		margin: 24px 12px 12px;
		border-radius: 12px;
		padding: 12px 16px;
		background-image: linear-gradient(to bottom, #DAECF8, #F1F9FB, #FFFFFF);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);

		._right {
			position: absolute;
			right: 16px;
			top: -24px;

			.t_avatar {
				// 从左到右渐变
				background: linear-gradient(to right, #E8EBF2, #E8EBF2 40%, #EEEFF4 70%, #F3F4F8);
				width: 80px;
				height: 80px;
				border-radius: 50%;
				border: 4px solid #fff;

			}
		}
	}
</style>